<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Shadow Plane Example</title>
    <style></style>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="./aframe-shadow-casting.js"></script>
  </head>
  <body>
    <a-scene light="defaultLightsEnabled: false">
      <a-light type="ambient" intensity="0.5" castShadow="false"></a-light>

      <a-box color="#0cf" position="-2 .5 -5" shadow="receive:true"></a-box>

      <a-sphere
        id="ball"
        radius="1"
        position="0 2 -5"
        material="color:#09f"
        animation__pos="property: position; from: 0 2 -5; to: 0 3 -5; loop: true; dur: 1500; dir: alternate; easing: easeInOutSine"
        shadow="receive: false"
      >
      </a-sphere>

      <!-- <a-shadow-light 
              type="spot"
              far="18"
              target="0 0 -5"
              mapsize="4096 4096"
              helper="true"
              castshadow="true"
              position="0 16 -5">
          </a-shadow-light> -->

      <a-entity
        id="spot-light"
        shadow-light="type:spot; far:40; target:0 0 -5; mapsize:1024 1024; helper:true; castShadow:true;"
        position="-1.5 5 -5"
      ></a-entity>
      
      <a-entity
        id="directional-light"
        shadow-light="type:directional; far:40; target:0 0 -5; mapsize:1024 1024; helper:true; castShadow:false;"
        position="5 5 -5"
      ></a-entity>

      <a-shadow-plane dimensions="20 20" position="0 0 -5"> </a-shadow-plane>
    </a-scene>

    <script type="module">
      import { Pane } from "https://cdn.jsdelivr.net/npm/tweakpane@4.0.3/dist/tweakpane.min.js";
      const { log, dir, clear } = console;

      const pane = new Pane({ title: "aframe-shadow-casting" });
      document.querySelectorAll("a-entity[shadow-light]").forEach((light, index) => {
        const folder = pane.addFolder({title:light.id});
        const compData = light.components["shadow-light"].data;

        log(compData)

        folder.addBinding(light.components['position'], "data").on("change", e => {
          light.setAttribute("position", e.value);
          light.flushToDOM();
        });

        folder.addBinding(compData, "color").on("change", e => {
          light.setAttribute("shadow-light", {color: e.value});
          light.flushToDOM();
        });

        folder.addBinding(compData, "intensity", {min:0, max:3}).on("change", e => {
          light.setAttribute("shadow-light", {intensity: e.value});
          light.flushToDOM();
        });

        folder.addBinding(compData, "castShadow").on("change", e => {
          light.setAttribute("shadow-light", {castShadow:e.value});
          light.flushToDOM();
        });

        folder.addBinding(compData, "helper").on("change", e => {
          light.setAttribute("shadow-light", {helper:e.value});
          light.flushToDOM();
        });

        if (light.shadowLight.type.toLowerCase().includes('spot')) {
          folder.addBinding(compData, "far", {step:10}).on("change", e => {
            light.setAttribute("shadow-light", {far: e.value});
            light.flushToDOM();
          });
          folder.addBinding(compData, "near", {step:10}).on("change", e => {
            light.setAttribute("shadow-light", {near: e.value});
            light.flushToDOM();
          });
        }

        // you can access the THREE.Light object from the shadow-light element
        // console.log(light.shadowLight);
      });
    </script>
  </body>
</html>
